<!--
 * @Author: your name
 * @Date: 2021-09-29 10:30:29
 * @LastEditTime: 2021-10-13 10:13:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \smartCampus-admin\src\module\smartCampus\views\schoolConfig\schoolList\components\addSchoolPopup.vue
-->
<template>
    <sc-dialog
        title="抓取人脸中"
        v-model="propValue"
        custom-class="getFacePopup"
        width="840px"
        top="50px"
        @close="$emit('input', false)"
        @opened="opened"
        @closed="closed"
    >
        <div class="dialog-content flex-col--c" v-loading="loading">
            <video id="tracking-face-video" ref="video" preload autoplay loop muted :style="{ width: videoConfig.width + 'px' }"></video>
            <canvas
                ref="canvas"
                :style="{ width: canvasConfig.width + 'px', height: canvasConfig.height + 'px' }"
                style="position:absolute;top:-9999px;left:0;"
            ></canvas>
        </div>

        <div slot="footer" class="dialog-footer flex-row-sb-c">
            <div>
                <el-button type="warning" @click="againGet">重新抓取</el-button>
                <el-button type="primary" @click="getImage">点击抓取</el-button>
            </div>
            <div>
                <el-button
                    type="success"
                    v-if="faceImg"
                    @click="
                        $emit('getFaceImg', faceImg);
                        $emit('input', false);
                    "
                    >确认使用</el-button
                >
                <el-button type="info" @click="_close">取 消</el-button>
            </div>
        </div>
    </sc-dialog>
</template>
<script>
// import 'tracking'
// import 'tracking/build/data/face-min.js'

export default {
    name: "getFacePopup",
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading: false,
            canvasConfig: {
                width: 800 * 3,
                height: 600 * 3
            },
            videoConfig: {
                width: 800
                // height: 600,
            },
            video: "",
            canvas: "",
            context: "",
            faceImg: "" //抓取到的人脸图像
        };
    },
    computed: {
        propValue: {
            get() {
                return this.value;
            },
            set(nval) {
                this.$emit("input", nval);
            }
        }
    },
    methods: {
        // 打开动画结束时
        opened() {
            this.openCamera();
        },
        // 关闭动画结束
        closed() {
            this.video = "";
            this.canvas = "";
            this.context = "";
        },
        //关闭弹窗
        _close() {
            this.$emit("input", false);
        },
        // 重新抓取
        againGet() {
            this.faceImg = "";
            this.video = "";
            this.canvas = "";
            this.context = "";
            this.openCamera();
        },
        async openCamera() {
            let status = await this.checkNavigator();

            if (!status) {
                return this.$message.error("您的电脑不支持媒体采集！！！");
            }

            let constraints = {
                // video: {width: this.canvasConfig.width, height: this.canvasConfig.height},
                video: true,
                audio: true
            };

            //获取摄像头权限  必须是https协议才可调用
            let promise = navigator.mediaDevices.getUserMedia(constraints); // h5 新的API
            const MediaStream = await promise.catch(PermissionDeniedError => {
                console.log("授权情况", PermissionDeniedError);
                if (PermissionDeniedError.toString().indexOf("Permission denied") != -1) {
                    return this.$notify({
                        title: "提示",
                        message: "请到浏览器隐私设置和安全性=>网站设置=>开启摄像头和麦克风权限",
                        type: "success",
                        duration: 3000,
                        onClose: () => {
                            this.propValue = false;
                        }
                    });
                }
            });
            this.video = this.$refs.video;
            this.canvas = this.$refs.canvas;
            this.canvas.width = this.canvas.clientWidth * window.devicePixelRatio;
            this.canvas.height = this.canvas.clientHeight * window.devicePixelRatio;
            this.context = this.canvas.getContext("2d");

            this.video.srcObject = MediaStream;
            this.video.play();
        },
        // 获取当前视频图片
        getImage() {
            this.video.pause(); // success  将暂停 video
            this.context.drawImage(this.video, 0, 0, this.canvas.clientWidth * window.devicePixelRatio, this.canvas.clientHeight * window.devicePixelRatio); // 绘制到 canvas
            const data_url = this.canvas.toDataURL("image/png"); //base64 request
            // this.loading = false
            this.faceImg = data_url;
            console.log("base64ToFile", this.$u.base64ToFile(data_url,this.$u.getUUID()))
            this.$notify({
                title: "头像抓取成功",
                message: "点击“确定使用”使用头像",
                type: "success",
                offset: 200
            });
        },
        // 判断浏览器是否支持webRTC
        async checkNavigator() {
            console.log(navigator.mediaDevices);
            console.log(navigator.mediaDevices.enumerateDevices);
            console.log(navigator.mediaDevices.getUserMedia);
            if (
                navigator.mediaDevices === undefined ||
                navigator.mediaDevices.enumerateDevices === undefined ||
                navigator.mediaDevices.getUserMedia === undefined
            ) {
                if (navigator.mediaDevices === undefined) {
                    var fctName = "navigator.mediaDevices";
                } else if (navigator.mediaDevices.enumerateDevices === undefined) {
                    var fctName = "navigator.mediaDevices.enumerateDevices";
                } else if (navigator.mediaDevices.getUserMedia === undefined) {
                    var fctName = "navigator.mediaDevices.getUserMedia";
                } else {
                    console.assert(false);
                }
                this.$message.error("WebRTC issue-! " + fctName + " 不存在于您的浏览器中");
                return false;
            }
            return true;
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .getFacePopup {
    overflow: hidden;

    .sc-dialog-main {
        max-height: 2000px;

        .dialog-content {
        }
    }
}

/*/deep/ body {*/
/*    overflow-x: hidden;*/
/*}*/
</style>
